<template>
  <div>
    <el-dialog :visible.sync="showDialog" width="60%" :close-on-click-modal="false" :close-on-press-escape="false">
      <div slot="title" class="flex align-center">
        <span class="font-size-18 font-weight-700 padding-right-5 color-333333">{{ title }}</span>
        <span v-if="showTime" class="color-999999 padding-right-15">{{ deadlineTitle }}</span>
        <span class="color-333333">单位：万元</span>
      </div>
      <div class="flex fit-width">
        <div class="item-box top-bg cursor-pointer t-center" :class="index > 0 ? 'l-box' : 's-box'" v-for="(item, index) in projectList" :key="item.id" @click="goOperationIndex(item.primaryKey)">
          <span v-if="item.name" class="font-weight-700 cursor-pointer">{{ item.name }}</span>
          <span v-if="item.name" class="icon el-icon-arrow-right padding-left-5"></span>
        </div>
      </div>
      <div class="flex fit-width">
        <div class="item-box top-bg flex margin-top-5" :class="index > 0 ? 'l-box' : 's-box'" v-for="(item, index) in projectList" :key="item.id">
          <div v-if="index > 0" class="explain-title">{{showFirstLevel ? '累计执行' : '当月执行'}}</div>
          <div v-if="index > 0" class="explain-title">计划</div>
          <div v-if="index > 0" class="explain-title">
            <span class="cursor-pointer">偏差值</span>
            <span v-tooltip="'偏差值'" class="icon el-icon-question padding-left-5"></span>
          </div>
          <div v-if="index > 0" class="explain-title">
            <span class="cursor-pointer">偏差率</span>
            <span v-tooltip="'偏差率'" class="icon el-icon-question padding-left-5"></span>
          </div>
        </div>
      </div>
      <div>
        <cash-tree :list="list"></cash-tree>
      </div>
    </el-dialog>
  </div>
</template>
<script>
  import dayjs from 'dayjs';
  import { cashFlowChargeItem, performanceFinancialDetail } from '@a/index';
  import { guid, goOperationIndex } from '@/common/js/utils';
  import cashTree from './cashTree.vue';
  import $ from 'jquery';

  export default {
    name: 'cashDialog',
    props: {
      selectTime: {
        type: String,
        default: dayjs(new Date(new Date().getTime() - 24 * 30 * 60 * 60 * 1000)).format('YYYY-MM'),
      },
      showFirstLevel: {
        type: Boolean,
        default: true,
      },
      showTime: {
        type: Boolean,
        default: true,
      },
      title: {
        type: String,
        default: '',
      },
      bizType: {
        type: Array,
        default: () => {
          return [];
        },
      },
      //financialManifestation是财务表现
      pageType:{
        type: String,
        default: '',
      }
    },

    data() {
      return {
        showDialog: false,
        projectList: [],
        deadlineTitle: '',
        list: [],
        goOperationIndex: goOperationIndex,
        model: {}
      };
    },

    methods: {
      init() {
        this.showDialog = true;
        this.getSource();
      },

      async getSource() {
        this.pageType == "financialManifestation" ? await this.getFinancialManifestation() : await this.getOperate()

        this.model.projectList.unshift({});
        this.deadlineTitle = this.model.deadlineTitle;
        this.projectList = this.model.projectList;

        if (!this.showFirstLevel) {
          if (this.model.rows.length > 0) {
            this.list = this.model.rows[0].itemDtos || [];
          }
        } else {
          this.list = this.model.rows || [];
        }
      },

      async getOperate () {
        let res = await cashFlowChargeItem({
          startMonth: !this.showFirstLevel ? new Date(this.selectTime).getMonth() + 1 : null,
          month: new Date(this.selectTime).getMonth() + 1,
          year: new Date(this.selectTime).getFullYear(),
          cycle: 'year',
          bizTypes: this.bizType,
        });
        this.model = res
      },

      async getFinancialManifestation () {
        let res = await performanceFinancialDetail({
          month: new Date(this.selectTime).getMonth()+1,
          year:new Date(this.selectTime).getFullYear(),
          typeList:this.bizType
        });
        this.model = res
      },

      goDictionary(name){
        let url = "/businessAssets/dataDic/index?token=1BECA34141E04A338B570F70C780C955&menuId=caa9147d6ba64e1a95bd3eeb76cc5203&parentMenuId=7ee2400d0e72437aa3bdb5823497537f&timestamp=1667202507216&keyWord=" + name
        window.open(url)
      }
    },

    components: { cashTree },
  };
</script>

<style lang="scss" scoped>
  ::v-deep .el-dialog {
    width: fit-content !important;
    max-width: 90%;
    min-width: 640px;
  }
  ::v-deep .el-dialog__header {
    background: #ffffff;
    border-bottom: 1px solid #f1f1f1;
  }
  ::v-deep .el-dialog .el-dialog__header .el-dialog__close {
    color: #000;
  }
  ::v-deep .el-dialog__body {
    overflow-x: auto;
  }
  .fit-width{
    width: fit-content;
  }
  .item-box {
    height: 42px;
    border-radius: 3px 0px 0px 3px;
    padding: 10px;
    border-right: 2px solid #ffffff;
  }
  .l-box {
    width: 600px;
  }
  .explain-title {
    width: 25%;
    padding-left: 55px;
  }
  .s-box {
    width: 200px;
  }
  .top-bg {
    background: #f2f2f2;
    text-align: left;
  }
</style>
